<template>
	<div id="orderby">
    <div class="order-by transition-fast" 
      :class="{'active': orderByParams.orderBy=='colligate'}" 
      @click="orderByProps('colligate')"
      title="点击后恢复默认排序">
      <div class="zonghe">综合</div>
      <div class="icon-group">
        <i class="icon" :class="{'icon-down': orderByParams.orderBy !='colligate', 'icon-up': orderByParams.orderBy =='colligate'}"></i>
      </div>
    </div>
    <div class="order-by transition-fast" 
      :class="{'active': orderByParams.orderBy=='goodsSalenum'}"
      @click="orderByProps('goodsSalenum')"
      :title="orderByParams.orderBy=='goodsSalenum'?'点击后恢复默认排序': '点击后按照月销量从高到低'">
      <div class="sale-num">销量</div>
      <div class="icon-group">
        <i class="icon" :class="{'icon-down': orderByParams.orderBy !='goodsSalenum', 'icon-up': orderByParams.orderBy =='goodsSalenum'}"></i>
      </div>
    </div>
    <div class="order-by transition-fast"
      :class="{'desc': orderByParams.orderType == 'desc', 'asc': orderByParams.orderType == 'asc'}"
      @click="orderByProps('storePrice')"
      :title="priceTitle">
      <div class="prop-name">价格</div>
      <div class="icon-group price-prop">
        <i class="icon" :class="{'desc': orderByParams.orderType == 'desc', 'asc': orderByParams.orderType == 'asc', 'default': !orderByParams.orderType}"></i>
      </div>
    </div>

    <!-- 新增“最新” -->
    <div class="order-by transition-fast" @click="orderByProps('addTime')"
      :class="{'active': orderByParams.orderBy=='addTime'}"
      :title="orderByParams.orderType == 'addTime' ? '点击后按商品上传时间排序' : '点击后恢复默认排序'">
      <div class="prop-name">最新</div>
    </div>

    <div class="all-order-box">
      <div class="price-body">
        <div class="price min">
          <span class="money-flag">￥</span><input type="text" v-model="orderByParams.goodsCurrentPriceFloor" placeholder="最低价" @blur="emitParamsToParent()">
        </div> - 
        
        <div class="price max">
          <span class="money-flag">￥</span><input type="text" v-model="orderByParams.goodsCurrentPriceCeiling" placeholder="最高价" @blur="emitParamsToParent()">
        </div>
        <div class="conform-box">
          <div class="price min">
            <span class="money-flag">￥</span><input type="text" v-model="orderByParams.goodsCurrentPriceFloor" placeholder="最低价">
          </div> - 
          
          <div class="price max">
            <span class="money-flag">￥</span><input type="text" v-model="orderByParams.goodsCurrentPriceCeiling" placeholder="最高价">
          </div>
          <a class="conform-btn" @click="emitParamsToParent()">确定</a>
        </div>
      </div>
      <!-- 起订量 -->
      <div class="order-number" v-if="!shop">
          起订量
        <input type="text" v-model="orderByParams.tierdPrice" @blur="emitParamsToParent()">
          以下
          <!-- 悬浮确定框 -->
          <div class="conform-box">
            <span>起订量</span>
            <input type="num" class="order-moq"  v-model="orderByParams.tierdPrice">
            <span>以下</span>
            <a class="conform-btn" @click="emitParamsToParent()">确定</a>
          </div>
      </div>
    </div>
    
    <!-- 货源地 -->
    <div class="goods-origin select-loc" v-if="!shop">
      <span @click="showArea = !showArea">
        {{orderByParams.areaName || '货源地'}}
        <i class="iconfont ico-arrowdownxi"></i>
      </span>
      <div class="loc-container" v-show="showArea">
        <div class="header">
          <div class="item" :class="{'active': areaIndex == 0}" :title="selectedArea.province" @click="showAreaIndex(0)">{{selectedArea.province || '请选择'}}</div>
          <div class="item" v-show="citys.length > 0" :title="selectedArea.city" :class="{'active': areaIndex == 1}" @click="showAreaIndex(1)">{{selectedArea.city || '请选择'}}</div>
          <div class="item" v-show="countys.length > 0" :title="selectedArea.county" :class="{'active': areaIndex == 2}" @click="showAreaIndex(2)">{{selectedArea.county || '请选择'}}</div>
          <span class="fr iconfont ico-close" @click="showArea = false"></span>
        </div>
        <!-- 第一级 -->
        <div class="content clearfix" v-show="areaIndex == 0">
          <div class="unlimited" @click="unlimited()">不限</div>
          <span class="place" v-for="(province, index) in allArea" :key="index" :class="{'red': selectedArea.province == province.areaName}" @click="selectedProvince(province)">{{province.areaName}}</span>
        </div>
        <!-- 第二级 -->
        <div class="content clearfix" v-show="areaIndex == 1">
          <span class="place" v-for="(city, index) in citys" :title="city.areaName" :key="index" :class="{'red': selectedArea.city == city.areaName}" @click="selectedCity(city)">{{city.areaName}}</span>
        </div>
        <!-- 第三级 -->
        <div class="content clearfix" v-show="areaIndex == 2">
          <span class="place" v-for="(county, index) in countys"  :key="index" :title="county.areaName" :class="{'red': selectedArea.county == county.areaName}" @click="selectedCounty(county)">{{county.areaName}}</span>
        </div>
      </div>
    </div>
    <!-- 特权商品等 -->
    <label class="checkbox" v-if="!shop">
      <input type="checkbox" name="goodsType" value="1" v-model="orderByParams.goodsType" @change="switchBooleanToInt()"> 去伙拼
    </label>
    <!-- 特权商品等 -->
    <label class="checkbox" v-if="!shop" v-for="(item, index) in lists" :key="index">
      <input type="checkbox" name="aGoods" :value="item.id" v-model="aGoods" @change="getSelectedParams()"> {{item.webName}}
    </label>
    <!-- 确定按钮 -->
    <!-- <div class="ok-btn" :class="{light: (price.min || price.max)}" @click="emitPrice">确定</div> -->
    <div class="clear-fix"></div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {
      orderByParams: {
        // 商品最低价
        goodsCurrentPriceFloor: '',
        // 商品最高价
        goodsCurrentPriceCeiling: '',
        // 去火拼
        goodsType: 0,
        // 增值商品
        aGoods: '',
        // 货源地
        areaId: '',
        // 货源地名称
        areaName: '',
        // 起订量
        tierdPrice: '',
        // 按那个字段排序
        orderBy: this.selected ? 'colligate' : '',
        // 排序顺序
        orderType: ''
      },
      showArea: false,
      areaIndex: 0,
      citys: [],
      countys: [],
      aGoods: [],
      selectedArea: {
        province: '',
        city: '',
        county: ''
      },
      params: {
        cityId: '',
        cityName: '',
        view: this.$route.query.token ? '1' : '',
        goodsList: [
          {
            id: this.$route.params.id,
            count: 1
          }
        ]
      },
      lists: []
    }
  },
  created() {
    Object.assign(this.orderByParams, this.initParam)
    // 将数据深拷贝一份
    this.lists = JSON.parse(JSON.stringify(this.list))
    // 给参数加上checked属性
    this.lists.forEach(v => {
      this.$set(v, 'checked', false)
    })
    this.aGoods = this.initParam.aGoods.split(',')
    this.fetchAllArea()
  },
  props: {
    initParam: {
      type: Object,
      default: () => { return { aGoods: '' } }
    },
    selected: {
      type: Boolean,
      default: true
    },
    orderby: {
      type: String,
      default: ''
    },
    ordertype: {
      type: String,
      default: ''
    },
    minprice: {
      type: [Number, String],
      default: ''
    },
    maxprice: {
      type: [Number, String],
      default: ''
    },
    // 是否是店铺
    shop: {
      type: [Boolean],
      default: false
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    // 设置排序方式
    this.orderByParams.orderBy = this.orderby || this.orderByParams.orderBy
    // 默认清空排序方式（防止对价格产生影响）
    this.orderByParams.orderType = ''
    // 如果当前是价格
    if (this.orderByParams.orderBy == 'storePrice') {
      this.orderByParams.orderType = this.ordertype || this.orderByParams.orderType
    }
    this.orderByParams.goodsCurrentPriceFloor = this.minprice
    this.orderByParams.goodsCurrentPriceCeiling = this.maxprice
  },
  watch: {
    orderby() {
      // 设置排序方式
      this.orderByParams.orderBy = this.orderby
      // 默认清空排序方式（防止对价格产生影响）
      this.orderByParams.orderType = ''
      // 如果当前是价格
      if (this.orderby == 'storePrice') {
        this.orderByParams.orderType = this.ordertype || this.orderByParams.orderType
      }
    },
    minprice() {
      this.orderByParams.goodsCurrentPriceFloor = this.minprice
    },
    maxprice() {
      this.orderByParams.goodsCurrentPriceCeiling = this.maxprice
    },
    initParam: {
      handler() {
        // 设置商品类型
        this.orderByParams.goodsType = this.initParam.goodsType
        this.orderByParams.tierdPrice = this.initParam.tierdPrice
        if (!this.initParam.areaId) {
          this.unlimited(true)
        }
        // 如果当前选中状态中有数据，则将其选中
        if (this.initParam.aGoods) {
          this.aGoods = this.initParam.aGoods.split(',')
        } else {
          this.aGoods = []
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters(['allArea']),
    // 价格提示信息
    priceTitle() {
      // 如果当前是升序，展示如下信息
      if (this.orderByParams.orderType == 'asc') {
        return '点击后按照价格从低到高'
      }

      // 如果当前是降序，展示如下信息
      if (this.orderByParams.orderType == 'desc') {
        return '点击后恢复默认排序'
      }

      // 如果当前价格未被点击，展示一下信息
      return '点击后按照价格从高到低'
    }
  },
  methods: {
    ...mapActions(['fetchAllArea']),
    /**
     * 获取选中的参数
     */
    getSelectedParams() {
      let aGoods = this.aGoods.filter(v => {
        return v
      })
      this.orderByParams.aGoods = aGoods.join(',')
      this.emitParamsToParent()
    },
    /**
     * 将布尔类型转换成数值类型
     */
    switchBooleanToInt() {
      this.orderByParams.goodsType = this.orderByParams.goodsType ? 1 : 0
      this.emitParamsToParent()
    },
    /**
     * 将结果通知给父级
     */
    emitParamsToParent() {
      // 如果点击的是非价格，则全部设置为降序排列
      if (this.orderByParams.orderBy != 'storePrice') {
        this.orderByParams.orderType = ''
      }
      this.$emit('on-change', this.orderByParams)
    },
    /**
     * 提交价格
     */
    emitPrice() {
      // 如果最高价小于最低价，则提示
      if (this.orderByParams.goodsCurrentPriceFloor && this.orderByParams.goodsCurrentPriceCeiling && Number(this.orderByParams.goodsCurrentPriceFloor) > Number(this.orderByParams.goodsCurrentPriceCeiling)) {
        this.$toast('最高价应该大于最低价')
        return
      }
      // 通知上级
      this.emitParamsToParent()
    },

    /**
     * 按照传入的属性进行排序，如果当前是综合，则按照综合升序排列
     *
     * @param  {String} orderProp 排序属性
     */
    orderByProps(orderProp) {
      // 展示当前的排序字段
      this.orderByParams.orderBy = orderProp

      // 如果当前是价格排序
      if (orderProp == 'storePrice') {
        switch (this.orderByParams.orderType) {
          // 如果当前是升序，则将其变成降序
          case 'asc':
            this.orderByParams.orderType = 'desc'
            break
          // 如果是降序，则将其变成默认状态
          case 'desc':
            this.orderByParams.orderType = ''
            this.orderByParams.orderBy = 'colligate'
            break
          // 如果是第一次点击，则将其变成升序
          default:
            this.orderByParams.orderType = 'asc'
        }
        this.emitParamsToParent()
        return
      }
      // 当前不是价格排序，则重置价格的排序方式
      this.orderByParams.orderType = ''
      this.emitParamsToParent()
    },

    /**
     * 展示地区选择的界面
     *
     * @param { Number } index 当前需要展示的第几个地区界面
     */
    showAreaIndex(index) {
      this.areaIndex = index
    },

    /**
     * 展示省
     * @param  { Object } province 当前省
     */
    selectedProvince(province) {
      // 选中省的名称
      this.selectedArea.province = province.areaName

      // 展示下方的城市
      this.citys = province.childs

      // 展示选择城市界面
      this.areaIndex = 1

      // 删除城市
      this.selectedArea.city = ''

      // 删除县
      this.selectedArea.county = ''

      // 清空县城数据
      this.countys = []
    },

    /**
     * 展示城市
     * @param  { Object } city 当前城市
     */
    selectedCity(city) {
      // 选中城市的名称
      this.selectedArea.city = city.areaName

      // 获取县城的id
      this.params.cityId = city.id

      // 保存县的名称
      this.params.cityName = city.areaName

      // 保存城市id
      this.orderByParams.areaId = city.id

      // 区域名称
      this.orderByParams.areaName = city.areaName

      // 隐藏地区选择组件
      this.showArea = !this.showArea
      this.emitParamsToParent()
    },

    /**
     * 选中县，暂时不支持到县
     * @param  { Object } county 当前县
     */
    selectedCounty(county) {
      // 记录当前点击的城市
      this.selectedArea.county = county.areaName

      // 获取县城的id
      this.params.cityId = county.id

      // 保存县的名称
      this.params.cityName = county.areaName
    },

    unlimited(isShow) {
      this.areaIndex = 0
      // 删除省份
      this.selectedArea.province = ''

      // 删除城市
      this.selectedArea.city = ''

      // 删除县
      this.selectedArea.county = ''

      // 清空县城数据
      this.countys = []

      // 清空城市数据
      this.citys = []

      // 保存城市id
      this.orderByParams.areaId = ''

      // 区域名称
      this.orderByParams.areaName = ''

      // 只清空城市，不显示地区组件也不再次发送请求
      if (isShow) return

      // 隐藏地区选择组件
      this.showArea = !this.showArea
      this.emitParamsToParent()
    }
  }
}
</script>

<style lang="scss" scoped>
.clear-fix {
  clear: both;
}
#orderby {
  background-color: #fbf9fa;
  height: 34px;
  padding: 4px;

  .order-by {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    float: left;
    text-align: center;
    margin-right: -2px;
    height: 26px;
    overflow: hidden;
    line-height: 24px;
    position: relative;
    width: 56px;

    .icon-group {
      display: inline-block;
      position: absolute;
      width: 13px;
      top: 0px;
      right: 0px;
      // transform: translateY(-35px);

      &.price-prop {
        height: 100%;
        transform: translateY(0px);
      }
    }

    .prop-name {
      display: block;
      .zonghe {
        display: block;
        float: none;
      }
    }

    &:hover, &.active {
      color: #F00384;

      .icon-group {
        transform: translate(0px);
      }
    }

    &.desc {
      // background-color: #F6F6F6;
      color: #F00384;

      .icon-triangle-down {
        background: url(../../../assets/2.png) no-repeat center;
      }
    }

    &.asc {
      // background-color: #F6F6F6;
      color: #F00384;

      .icon-triangle-up {
        background: url(../../../assets/2.png) no-repeat center;
      }
    }
  }
  .price-body {
    float: left;
    margin-left: 12px;
    position: relative;
    .price {
      background-color: #FFFFFF;
      border: 1px solid #DDDDDD;
      display: inline-block;
      height: 26px;
      line-height: 24px;
      width: 100px;

      .money-flag {
        color: #666666;
        font-size: 12px;
        margin-left: 8px;
      }

      input {
        background-color: transparent;
        border: 0px;
        font-size: 12px;
        outline: none;
        width: 60px;
        margin-left: 5px;
      }
    }
    &:hover {
      .conform-box{
        display: block;  
        user-select: none;
      }
    }
    .conform-box {
      position: absolute;
      display: none;
      width:282px;
      height: 34px;
      line-height:34px;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow:0 0 5px 3px #e0e0e0;
      left: 0px;
      top: -5px;
      padding:0 13px;
      z-index:1000;
      .conform-btn{
        display:inline-block;
        width:36px;
        height: 24px;
        background-color: #fb188c;
        text-align: center;
        line-height: 24px;
        color:#fff;
        margin-left:3px;
        font-weight:bold;
        cursor: pointer;
      }
    }
  }

  .order-number {
    float: left;
    line-height: 26px;
    margin-left: 34px;
    position: relative;

    input {
      border: 1px solid #DDDDDD;
      height: 26px;
      width: 70px;
      padding: 2px;
    }
    &:hover {
      .conform-box{
        display: block;  
        user-select: none;
      }
    }
    .conform-box {
      position: absolute;
      display: none;
      width:202px;
      height: 34px;
      line-height:34px;
      box-sizing: border-box;
      background-color: #fff;
      box-shadow:0 0 5px 3px #e0e0e0;
      left: 0px;
      top: -5px;
      padding:0 13px;
      z-index:1000;
      .order-moq{
        display: inline-block;
        width:64px;height: 23px;
        line-height:23px;
        box-sizing: border-box;
        border:1px solid #dcdcdc;
      }
      .conform-btn{
        display:inline-block;
        width:36px;
        height: 24px;
        background-color: #fb188c;
        text-align: center;
        line-height: 24px;
        color:#fff;
        margin-left:3px;
        font-weight:bold;
        cursor: pointer;
      }
      & span:first-child{
        color:#000;
        font-weight:bold;
      }
    }
  }

  .goods-origin {
    font-size: 12px;
    float: left;
    line-height: 26px;
    margin-left: 36px;

    i {
      font-size: 12px;
    }

    &.select-loc {
      cursor: pointer;
      display: inline-block;
      position: relative;

      &.selected {
        background-color: #f00384;
        color: white;
      }

      i {
        display: inline-block;

        &.rotate {
          transform: rotate(90deg);
        } 
      }

      .loc-container {
        background-color: #FFFFFF;
        border: 1px solid #f00384;
        width: 520px;
        position: absolute;
        top: 30px;
        z-index: 2;

        .header {
          background-color: #f6f6f6;
          height: 30px;

          .item {
            color: #666666;
            display: inline-block;
            width: 90px;
            line-height: 30px;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            &.active {
              background-color: #FFFFFF;
              color: #f00384;
            }
          }
        }

        .content {
          padding: 2px;
          .place {
            color: #666666;
            display: inline-block;
            float: left;
            width: 68px;
            margin: 6px 2px;
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            &.red {
              color: #f00384;
            }
          }
          .unlimited {
            width: 68px;
            margin: 6px 2px;
            text-align: center;
          }
        }
      }
    }
  }

  .checkbox {
    float: left;
    line-height: 26px;
    margin-left: 38px;

    input {
      margin-bottom: 6px;
    }
  }

  .ok-btn {
    background-color: #F6F6F6;
    border: 1px solid #DDDDDD;
    cursor: pointer;
    display: inline-block;
    color: #666666;
    font-size: 14px;
    width: 80px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin-left: -5px;

    &.light {
      background-color: #f00384;
      border: 1px solid #f00384;
      color: white;
    }
  }

  .icon  {
    background-size: 80% !important;
    display: inline-block;

    &.desc {
      background: url(../../../assets/btn_choose_down.png) no-repeat left center;
      width: 12px;
      height: 15px;
      margin-bottom: -3px;
    }

    &.asc {
      background: url(../../../assets/btn_choose_up.png) no-repeat left center;
      width: 12px;
      height: 15px;
      margin-bottom: -3px;
    }

    &.default {
      background: url(../../../assets/btn_choose.png) no-repeat left center;
      width: 12px;
      height: 15px;
      margin-bottom: -3px;
    }

    &.icon-down {
      background: url(../../../assets/btn_down.png) no-repeat left center;
      width: 12px;
      height: 15px;
      margin-bottom: -3px;
    }

    &.icon-up {
      background: url(../../../assets/btn_down_hl.png) no-repeat left center;
      width: 12px;
      height: 15px;
      margin-bottom: -2px;
    }

    &.icon-triangle-up {
      background: url(../../../assets/1.png) no-repeat center;
      width: 12px;
      height: 10px;
      transform: translateY(-5px);
    }

    &.icon-triangle-down {
      background: url(../../../assets/1.png) no-repeat center;
      width: 12px;
      height: 10px;
      transform: rotate(180deg) translateY(20px);
    }
  }
}
</style>